<template>
  <div class="settings-container">
    <div class="settings-cards">
      <!-- Existing Card -->
      <el-card class="settings-card">
        <h2>网站设置</h2>
        <hr style="border: 1px solid #ccc; margin: 20px 0;">
        <el-form :model="settings" label-width="120px">
          <el-form-item label="用户密钥最大值">
            <el-input v-model.number="settings.max_key_per_user" type="number" />
          </el-form-item>

          <el-form-item label="用户产品最大值">
            <el-input v-model.number="settings.max_product_per_user" type="number" />
          </el-form-item>

          <el-form-item label="开放注册">
            <el-switch v-model="settings.allow_register" />
          </el-form-item>

          <el-button type="primary" :loading="loadingSettings" @click="saveSettings">保存设置</el-button>
        </el-form>
      </el-card>

      <!-- New Card for Announcement -->
      <el-card class="settings-card">
        <h2>编辑站内公告</h2>
        <hr style="border: 1px solid #ccc; margin: 20px 0;">
        <el-form :model="announcement" label-width="120px">
          <el-form-item label="站内公告">
            <el-input v-model="announcement.text" type="textarea" rows="6" placeholder="请输入公告内容"></el-input>
          </el-form-item>

          <el-button type="primary" :loading="loadingAnnouncement" @click="saveAnnouncement">保存公告</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getSiteSettings, setSiteSettings, getSiteInfo, updateSiteInfo } from '@/api/settings';
import { Message } from 'element-ui';

export default {
  data() {
    return {
      settings: {
        max_key_per_user: 2000,
        max_product_per_user: 10,
        allow_register: true
      },
      announcement: {
        text: ''
      },
      loadingSettings: false,
      loadingAnnouncement: false
    };
  },
  mounted() {
    this.fetchSettings();
    this.fetchAnnouncement();
  },
  methods: {
    async fetchSettings() {
      try {
        const response = await getSiteSettings();
        const data = response.data;

        this.settings = {
          max_key_per_user: Number(data.max_key_per_user),
          max_product_per_user: Number(data.max_product_per_user),
          allow_register: data.allow_register === 'true'
        };
      } catch (error) {
        Message({
          message: '无法获取设置!',
          type: 'error',
          duration: 5 * 1000
        });
      }
    },

    async fetchAnnouncement() {
      try {
        const response = await getSiteInfo(); // Fetching the announcement info
        if (response && response.data && response.data.info) {
          this.announcement.text = response.data.info; // Fill the content into the model
        } else {
          this.announcement.text = ''; // Fallback in case no content is returned
        }
      } catch (error) {
        Message({
          message: '无法获取公告!',
          type: 'error',
          duration: 5 * 1000
        });
      }
    },

    async saveAnnouncement() {
      console.log('Announcement Text:', this.announcement.text); // Log the announcement text before saving
      this.loadingAnnouncement = true;
      try {
        await updateSiteInfo(this.announcement.text);
        Message({
          message: '公告保存成功!',
          type: 'success',
          duration: 5 * 1000
        });
      } catch (error) {
        Message({
          message: '无法保存公告!',
          type: 'error',
          duration: 5 * 1000
        });
      }
      this.loadingAnnouncement = false;
    },
    async saveSettings() {
      this.loading = true;
      try {
        await setSiteSettings({
          max_key_per_user: String(this.settings.max_key_per_user),
          max_product_per_user: String(this.settings.max_product_per_user),
          allow_register: this.settings.allow_register ? 'true' : 'false'
        });
        Message({
          message: '保存成功!',
          type: 'success',
          duration: 5 * 1000
        })
      } catch (error) {
        Message({
          message: '无法保存设置!',
          type: 'error',
          duration: 5 * 1000
        })
      }
      this.loading = false;
    }
  }
};
</script>
<style scoped>
.settings-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  padding-top: 40px;
  padding-bottom: 40px;
  /* Adds space from the top */
}

.settings-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Add space between cards */
}

.settings-card {
  width: 600px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

